<template>
  <div class="go-top" v-show="show">
    <i class="iconfont icon-gotop" @click="goTop"></i>
  </div>
</template>

<script>
export default {
  data () {
    return {
      timer: null
    }
  },
  mounted () {
  },
  methods: {
    goTop () {
      let _this = this
      cancelAnimationFrame(this.timer)
      requestAnimationFrame(function fn () {
        let sTop = document.documentElement.scrollTop || document.body.scrollTop
        if (sTop > 0) {
          document.documentElement.scrollTop = sTop - 100
          _this.timer = requestAnimationFrame(fn)
        } else {
          cancelAnimationFrame(_this.timer)
        }
      })
    }
  },
  beforeDestroy () {
    cancelAnimationFrame(this.timer)
  },
  computed: {
    show () {
      return true
    }
  }
}
</script>

<style lang="less">
.go-top {
  position: fixed;
  bottom: 100px;
  right: 30px;
  width: 40px;
  height: 40px;
  z-index: 100;
   i{
     font-size: 3em;
     cursor: pointer;
     color: #ddd;
     transition: color .5s;
     &:hover {
       color: #8A290B;
     }
   }
}
</style>
